export default function ColorTable() {
  const colorDepth = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];

  return (
    <table className="w-full">
      <thead>
        <tr>
          <td>颜色</td>
          {colorDepth.map((depth) => (
            <td key={depth}>{depth}</td>
          ))}
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>bg-red-*</td>
          <td className="bg-kq-50">50</td>
          <td className="bg-kq-100">100</td>
          <td className="bg-kq-200">200</td>
          <td className="bg-kq-300">300</td>
          <td className="bg-kq-400">400</td>
          <td className="bg-kq-500">500</td>
          <td className="bg-kq-600">600</td>
          <td className="bg-kq-700">700</td>
          <td className="bg-kq-800">800</td>
          <td className="bg-kq-900">900</td>
          <td className="bg-kq-950">950</td>
        </tr>
      </tbody>
    </table>
  );
}
